<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
  
    <!-- 总结：
        1.M ： 模型（model）：data当中的数据；
        2.v ： 视图 （视图）：模块代码；
        3.vm： 视图模型 （View Model）：Vue实例；
    注意：
    1.data当中的所有属性最后都出现在vm身上；
    2.vm身上的属性 以及 vm原本有的属性 都能被调用出来。 -->


    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学校名称:{{name}}</h1>
        <h1>学校地址:{{address}}</h1>
        <h1>测试Vue当中的属性获取：{{_c}}</h1>
    </div>
    

    

</body>

<script type="text/javascript">
    Vue.config.productionTip = false  // 阻止启动时产生提示

    //创建Vue实例
    const vm = new Vue({
        el:'#root',// 用于指定当前Vue实例为哪个容
        data(){
            return{
                name:'贾旺',
                address:'四川省'
            }
        }
        
    });
    console.log(vm);

    
</script>
</html>